﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>放映页面</title>
    <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="/static/css/global.css">
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link href="/static/css/styles.css" rel="stylesheet">
    <script type="text/javascript" src="/static/jquery-ui-1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="/static/js/pdemo11.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/jquery-ui-1.12.1/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <script src="/static/js/bootstrap.js"></script>
    <script type="text/javascript" src="/static/js/jquery.form.min.js"></script>
    <style>
        .sidebar {
            display: none;
        }

        .navbar {
            display: none;
        }

        .img-remove {
            display: none !important;
        }

        .text-remove {
            display: none !important;
        }
    </style>
    <script type="text/javascript">
        function sub() {
            $("#formId").ajaxSubmit(function (message) {
            });
            return false;
        }
    </script>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">

                <a class="navbar-brand" href="#"><span>Lemon</span>Pai</a>
                <ul class="user-menu">
                    <li class="dropdown pull-right">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
                                class="glyphicon glyphicon-user"></span> User <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
    </nav>
    <div id="sidebar-collapse" class="col-sm-1 col-md-1 col-lg-1 sidebar">
        <form>
            <div class="form-group">
                <input type="text" class="form-control" id="inputitle">
            </div>
        </form>
        <ul class="nav menu text-center" id="menu">
            <li><a href="javascript:" id="textld"><span class="hidden-xs glyphicon glyphicon-dashboard"></span>
                    <div class="pull-right visible-lg text-center">插入文本</div>
                </a></li>
            <li><a href="javascript:" id="imgld"><span class="hidden-xs glyphicon glyphicon-th"></span>
                    <div class="pull-right visible-lg text-center">插入图片</div>
                </a></li>
            <li><a href="javascript:" id="videold"><span class="hidden-xs glyphicon glyphicon-stats"></span>
                    <div class="pull-right visible-lg text-center">插入视频</div>
                </a></li>
            <li><a href="javascript:" id="button_pptCreation"><span class="hidden-xs glyphicon glyphicon-pencil"></span>
                    <div class="pull-right visible-lg text-center">插入新页</div>
                </a></li>
            <li><a href="javascript:" id="button_pptRemove"><span class="hidden-xs glyphicon glyphicon-pencil"></span>
                    <div class="pull-right visible-lg text-center">删除本页</div>
                </a></li>
            <li><a href="javascript:" id="play_start"><span class="hidden-xs glyphicon glyphicon-pencil"></span>
                    <div class="pull-right visible-lg text-center">开始放映</div>
                </a></li>
            <li><a href="javascript:" id="play_end"><span class="hidden-xs glyphicon glyphicon-pencil"></span>
                    <div class="pull-right visible-lg text-center">结束放映</div>
                </a></li>
            <li><a href="javascript:" id="save"><span class="hidden-xs glyphicon glyphicon-pencil"></span>
                    <div class="pull-right visible-lg text-center">&nbsp;&nbsp;保存&nbsp;&nbsp;&nbsp;&nbsp;</div>
                </a></li>
            <li style="display:none;"><a href="javascript:" id="get"><span
                        class="hidden-xs glyphicon glyphicon-pencil"></span>
                    <div class="pull-right visible-lg text-center">&nbsp;&nbsp;&nbsp;Get！&nbsp;&nbsp;</div>
                </a></li>
            <li style="display:none;"><a href="javascript:" id="test1"><span
                        class="hidden-xs glyphicon glyphicon-pencil"></span>
                    <div class="pull-right visible-lg text-center">&nbsp;&nbsp;&nbsp;test1&nbsp;&nbsp;&nbsp;</div>
                </a></li>
            <li role="presentation" class="divider"></li>

        </ul>
    </div>
    <div style="text-align:center;" class="navbar navbar-fixed-bottom">

        <button type="button" id="saveTableData" class="btn btn-info">结束放映</button>

    </div>
    <form style="display:none;" id="formId" method="post" enctype="multipart/form-data" onsubmit="return sub();">
        <input id="inimgld" type="file" name="image">
        <button id="imgsubmit" class="submit" type="submit">提交</button>
    </form>
    <script type="text/javascript">

        const BTN1 = document.getElementById('inimgld');
        const BTN2 = document.getElementById('imgld');
        const BTN3 = document.getElementById('imgsubmit');

        BTN2.addEventListener('click', () => {
            BTN1.click();
        });

        var x = new FileReader;
        document.forms[1].elements[0].onchange = function () {
            x.readAsDataURL(this.files[0]);
        }

        x.onloadend = function () {
            if (current_id == 0) {
                $("#inimgld").val('');
            }
            document.images[(current_id - 1) * 6 + imgCount[current_id - 1]].src = this.result;

            var oDiv0 = document.getElementsByClassName('box')[(current_id - 1) * 6 + imgCount[current_id - 1]];
            oDiv0.style.display = "inline";
            oDiv0.style.width = '200px';
            oDiv0.style.height = '120px';
            imgCount[current_id - 1]++;
            $("#inimgld").val('');
        }

        $("#videold").click(function () {
            var cha = document.getElementsByClassName('section')[(current_id - 1) * 6 + videoBoxCount[current_id - 1]];
            cha.style.display = "block";

            videoBoxCount[current_id - 1]++;
        });

        function onUpload2_0(file) {
            var blob = new Blob([file]),
                url = URL.createObjectURL(blob);
            if (/video/g.test(file.type)) {
                var video = $('<video controls src="' + url + '">');
                var current_video_div = "#out" + current_id;
                $('#preview1', $(current_video_div)).html('').append(video);
                $('#upload1', $(current_video_div)).remove();
                video[(current_id - 1) * 6].onload = function (e) {
                    URL.revokeObjectURL(this.src);
                }
            }
        }
        function onUpload2_1(file) {
            var blob = new Blob([file]),
                url = URL.createObjectURL(blob);
            if (/video/g.test(file.type)) {
                var video = $('<video controls src="' + url + '">');
                var current_video_div = "#out" + current_id;
                $('#preview2', $(current_video_div)).html('').append(video);
                $('#upload2', $(current_video_div)).remove();
                video[1 + (current_id - 1) * 6].onload = function (e) {
                    URL.revokeObjectURL(this.src);
                }
            }
        }
        function onUpload2_2(file) {
            var blob = new Blob([file]),
                url = URL.createObjectURL(blob);
            if (/video/g.test(file.type)) {
                var video = $('<video controls src="' + url + '">');
                var current_video_div = "#out" + current_id;
                $('#preview3', $(current_video_div)).html('').append(video);
                $('#upload3', $(current_video_div)).remove();
                video[2 + (current_id - 1) * 6].onload = function (e) {
                    URL.revokeObjectURL(this.src);
                }
            }
        }
        function onUpload2_3(file) {
            var blob = new Blob([file]),
                url = URL.createObjectURL(blob);
            if (/video/g.test(file.type)) {
                var video = $('<video controls src="' + url + '">');
                var current_video_div = "#out" + current_id;
                $('#preview4', $(current_video_div)).html('').append(video);
                $('#upload4', $(current_video_div)).remove();
                video[3 + (current_id - 1) * 6].onload = function (e) {
                    URL.revokeObjectURL(this.src);
                }
            }
        }
        function onUpload2_4(file) {
            var blob = new Blob([file]),
                url = URL.createObjectURL(blob);
            if (/video/g.test(file.type)) {
                var video = $('<video controls src="' + url + '">');
                var current_video_div = "#out" + current_id;
                $('#preview5', $(current_video_div)).html('').append(video);
                $('#upload5', $(current_video_div)).remove();
                video[4 + (current_id - 1) * 6].onload = function (e) {
                    URL.revokeObjectURL(this.src);
                }
            }
        }
        function onUpload2_5(file) {
            var blob = new Blob([file]),
                url = URL.createObjectURL(blob);
            if (/video/g.test(file.type)) {
                var video = $('<video controls src="' + url + '">');
                var current_video_div = "#out" + current_id;
                $('#preview6', $(current_video_div)).html('').append(video);
                $('#upload6', $(current_video_div)).remove();
                video[5 + (current_id - 1) * 6].onload = function (e) {
                    URL.revokeObjectURL(this.src);
                }
            }
        }


        // const URL = 'http://172.20.34.120:5000';
        const URL = '';
        $.ajaxSetup({ async: false });
        var username;
        function query_username() {
            $.ajax({
                type: 'post',
                url: URL + '/json/username',
                data: username,
                contentType: false,
                processData: false,
                xhrFields: { withCredentials: true },
                crossDomain: true,
                success: function (data) {
                    console.log(data);
                },
            });
        };
        query_username();
        var articleList;
        $("#test1").on("click", function () {
            let formdata = new FormData();

            let title = prompt("请输入文章标题");
            if (title.length != 0) {
                formdata.append("title", title);
            }
            $.ajax({
                url: URL + '/json/create_article',
                data: formdata,
                type: "POST",
                processData: false,
                contentType: false,
                xhrFields: { withCredentials: true },
                crossDomain: true,
                success: function (data) {
                    articleId = data["id"];
                }
            });
        });
        var mark = 1, tp = 2;
        var t = 2;
        var T, R, temp;
        $("#textld").on("click ", function () {
            T = "box_" + current_id + "_" + textCount[current_id - 1];
            var current_page = "out" + current_id;
            var html = '<div id="box" class="mybox"><div class="innerbox" contenteditable="true" style="width:100%; height:100%;"></div></div>';
            var odiv = document.getElementById(current_page);
            $(odiv).append(html);
            document.getElementById("box").id = T;
            T = "textarea_" + current_id + "_" + textCount[current_id - 1];
            textCount[current_id - 1]++;
        });
        $("#save").on("click", function () {
            var formdata = new FormData();
            var newdata = new FormData();
            newdata.append("title", art_title);
            newdata.append("edit", true);
            newdata.append('id_debug', articleId);
            newdata.append('title_debug', art_title);
            var Img = new FormData();
            var _imgsize = new Array();
            var cnt = 0;
            for (var k = 0; k < pptCount; ++k) {
                cnt = 0;
                var tmp0 = document.getElementsByClassName("outbox")[k];
                for (var kk = 0; kk < 6; ++kk) {
                    var tmpimg = tmp0.getElementsByClassName("imgi")[kk];
                    if (tmpimg.src.length > 20) {
                        var tmp = tmp0.getElementsByClassName('box draggable box0 ui-draggable ui-draggable-handle')[kk];
                        _imgsize[k] = ++cnt;
                        var t_height = $(tmp).css('height');
                        var t_width = $(tmp).css('width');
                        var t_left = $(tmp).css('left');
                        var t_top = $(tmp).css('top');
                        var t_zindex = $(tmp).css('z-index');
                        formdata.append("width_" + k + "_" + kk, t_width);
                        formdata.append("height_" + k + "_" + kk, t_height);
                        formdata.append("left_" + k + "_" + kk, t_left);
                        formdata.append("top_" + k + "_" + kk, t_top);
                        formdata.append("zindex_" + k + "_" + kk, t_zindex);
                    }
                }
            }
            for (var k = 0; k < pptCount; ++k) {
                cnt = 0;
                var tmp0 = document.getElementsByClassName("outbox")[k];
                for (var kk = 0; kk < textCount[k]; ++kk) {
                    var tmpbox = tmp0.getElementsByClassName("innerbox")[kk];
                    if (tmpbox.innerText.length > 0) {
                        var tmp = tmp0.getElementsByClassName('mybox')[kk];
                        _textsize[k] = ++cnt;
                        var t_height = $(tmp).css('height');
                        var t_width = $(tmp).css('width');
                        var t_left = $(tmp).css('left');
                        var t_top = $(tmp).css('top');
                        var t_zindex = $(tmp).css('z-index');
                        formdata.append("twidth_" + k + "_" + kk, t_width);
                        formdata.append("theight_" + k + "_" + kk, t_height);
                        formdata.append("tleft_" + k + "_" + kk, t_left);
                        formdata.append("ttop_" + k + "_" + kk, t_top);
                        formdata.append("tzindex_" + k + "_" + kk, t_zindex);
                        formdata.append("tcontent_" + k + "_" + kk, tmpbox.innerText);
                    }
                }
            }
            formdata.append("pageindex", pptCount);
            for (var i = 0; i < pptCount; i++) {
                formdata.append("imgsize" + i, _imgsize[i]);
            }
            var objData = {};
            for (var entry of formdata.entries()) {
                objData[entry[0]] = entry[1];
            }
            newdata.append("content", JSON.stringify(objData));
            $.ajax({
                url: URL + '/edit',
                data: newdata,
                type: "POST",
                dataType: false,
                cache: false,
                processData: false,
                contentType: false,
                xhrFields: { withCredentials: true },
                crossDomain: true,
                success: function (data) {
                }
            });
            $.ajaxSetup({ async: false });
            for (var k = 0; k < pptCount; ++k) {
                var tmp0 = document.getElementsByClassName("outbox")[k];
                for (var kk = 0; kk < 6; ++kk) {
                    var tmpimg = tmp0.getElementsByClassName("imgi")[kk];
                    if (tmpimg.src == "") {
                        _imgsize[k] = kk;
                        break;
                    }
                    var t_src = tmpimg.src;
                    var temp = t_src.split(",");
                    var _Img = new FormData();
                    _Img.append("filename", "img" + articleId + "_" + k + "_" + kk + ".jpg");
                    _Img.append("content", temp[1]);
                    $.ajax({
                        url: URL + '/json/upload_base64',
                        data: _Img,
                        type: "POST",
                        dataType: false,
                        cache: false,
                        processData: false,
                        contentType: false,
                        xhrFields: { withCredentials: true },
                        crossDomain: true,
                        success: function (data) {
                        }
                    });
                }
            }
        });
        var anotherdata;
        var dic;
        var _pageindex = 0;
        $.ajaxSetup({ async: false });
        $("#get").on("click", function () {
            current_id = 0;
            var cnt1 = 0;
            $.ajax({
                url: URL + '/json/article_query?id=' + articleId + '&title=' + art_title,
                data: '',
                type: "POST",
                processData: false,
                contentType: false,
                xhrFields: { withCredentials: true },
                crossDomain: true,
                success: function (data) {
                    dic = JSON.parse(data["content"]);
                    _pageindex = parseInt(dic["pageindex"].trim());
                }
            });
            var fformdata = new FormData();
            var imgfielname = new Array();
            var imgcnt = 0;
            for (var i = 0; i < _pageindex; ++i) {
                var str = "imgsize" + i;
                for (var j = 0; j < parseInt(dic[str].trim()); ++j) {
                    var ttmp = "img" + articleId + "_" + i + "_" + j + ".jpg";
                    imgfielname[imgcnt++] = ttmp;
                }
            }
            var imgdic = {};
            fformdata.append('filenames', JSON.stringify(imgfielname));
            $.ajax({
                url: URL + '/json/get_base64_multiple',
                data: fformdata,
                type: "POST",
                processData: false,
                contentType: false,
                xhrFields: { withCredentials: true },
                crossDomain: true,
                success: function (data) {
                    imgdic = data;
                }
            });
            console.log(dic);
            var textcnt = 0;
            for (var i = 0; i < _pageindex; ++i) {
                $("#button_pptCreation").click();
                current_id = i + 1;
                var tnum = "textsize" + i;
                var str = "imgsize" + i;
                for (var j = 0; j < parseInt(dic[str].trim()); ++j) {
                    var ttmp = "data:image/jpeg;base64," + imgdic["img" + articleId + "_" + i + "_" + j + ".jpg"];
                    if (current_id == 0) {
                        $("#inimgld").val('');
                    }
                    document.images[(current_id - 1) * 6 + imgCount[current_id - 1]].src = ttmp;
                    var oDiv0 = document.getElementsByClassName('box')[(current_id - 1) * 6 + imgCount[current_id - 1]];
                    oDiv0.style.display = "inline";
                    oDiv0.style.width = dic["width" + "_" + i + "_" + j].trim();
                    oDiv0.style.height = dic["height" + "_" + i + "_" + j].trim();
                    oDiv0.style.top = dic["top" + "_" + i + "_" + j].trim();
                    oDiv0.style.left = dic["left" + "_" + i + "_" + j].trim();
                    $(oDiv0).css('z-index', dic["zindex" + "_" + i + "_" + j].trim());
                    imgCount[current_id - 1]++;
                    $("#inimgld").val('');
                    t += 30;
                    $(".box0").click(function () {
                        this.style.zIndex = t;
                        t++;
                    });
                }
                for (var j = 0; j < parseInt(dic[tnum]); ++j) {

                    $('#textld').click();
                    var Box0 = document.getElementsByClassName('mybox')[textcnt];
                    var Text0 = document.getElementsByClassName('innerbox')[textcnt];
                    textcnt++;
                    Box0.style.width = dic["twidth" + "_" + i + "_" + j].trim();
                    Box0.style.height = dic["theight" + "_" + i + "_" + j].trim();
                    Box0.style.top = dic["ttop" + "_" + i + "_" + j].trim();
                    Box0.style.left = dic["tleft" + "_" + i + "_" + j].trim();
                    $(Box0).css('z-index', dic["tzindex" + "_" + i + "_" + j].trim());
                    Text0.innerText = dic["tcontent" + "_" + i + "_" + j];
                    t += 10;
                    $(".box0").click(function () {
                        this.style.zIndex = t;
                        t++;
                    });
                }
                $(".outbox")[0].style.display = "inline";
            }
            for (var ii = 1; ii < _pageindex; ii++) {
                $(".outbox")[ii].style.display = "none";
            }
            $("#play_start").click();
        });
        function dataURLtoFile(dataurl, filename = 'file') {
            let arr = dataurl.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let suffix = mime.split('/')[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], `${filename}.${suffix}`, {
                type: mime
            })
        }
    </script>
</body>

</html>